let date = new Date()
//获取今年年份
let year = date.getFullYear()
//获取当月
let month = date.getMonth()
//获取当日
let day = date.getDate()
//获取选中的Index
let dayIndex = null
//变化日期
let dayChange = null

//设置为本月1日
date.setDate(1)
//获取现在是周几
let week = date.getDay()
//设置为下一月
date.setMonth(month + 1)
//设置为本月最后一天
date.setDate(0)
let lastDateNumber = date.getDate()





let yearEl = document.querySelector('.year')
let monthEl = document.querySelector('.month')
let timeEl = document.querySelector('.time')
let timeItemList = null

//点击的日期
let clickDate = null
let clickMonth = null
let clickYear = null

setYearSelect()
setMonthSelect()
setDateBox()

let timer = setTimeout(function () {
  timeItemList = timeEl.querySelectorAll('.item')

  dayChange = day
  renderDate(week, lastDateNumber)

  //当日选中

  timeItemList[dayIndex].classList.add('active')
  dayChange = day

  //给每个日添加点击事件
  for (let i = 0; i < timeItemList.length; i++) {
    timeItemList[i].onclick = function () {
      if (!this.querySelector('.first').textContent) return
      //去除所有的active
      for (let j = 0; j < timeItemList.length; j++) {
        timeItemList[j].classList.remove('active')
      }
      this.classList.add('active')
      clickDate = Number(this.querySelector('.first').textContent)
      clickMonth = Number(monthEl.value) + 1
      clickYear = Number(yearEl.value)

      dayChange = Number(this.textContent)
      // console.log(dayChange)
      // console.log(clickYear, clickMonth, clickDate)
      getMonthData(clickYear, clickMonth)
      getDayData(clickYear, clickMonth, clickDate)
    }
  }


}, 0)

//计算week和lastDateNumber
function calcInfo(year, month) {
  let time = new Date(year, month)
  let week = time.getDay()

  time.setMonth(Number(month) + 1)
  time.setDate(0)
  let lastDateNumber = time.getDate()

  return {
    week,
    lastDateNumber
  }
}

//设置日
function renderDate(week, lastDateNumber) {
  for (let i = 0; i < 42; i++) {
    timeItemList[i].index = i
    timeItemList[i].querySelector('.first').textContent = ''
  }
  //清除所有的选中
  for (let j = 0; j < timeItemList.length; j++) {
    timeItemList[j].classList.remove('active')
  }
  for (let i = 0; i < lastDateNumber; i++) {
    timeItemList[i + week].querySelector('.first').textContent = i + 1
    if (timeItemList[i + week].querySelector('.first').textContent == dayChange) {
      dayIndex = timeItemList[i + week].index

    }
  }

}

//年份选择框
function setYearSelect() {
  for (let i = -10; i < 11; i++) {
    let option = new Option(year + i, year + i)
    yearEl.appendChild(option)
  }

  yearEl.value = year


}


//月份选择框
function setMonthSelect() {
  for (let i = 0; i < 12; i++) {
    let option = new Option(`${i + 1}月`, i)

    monthEl.appendChild(option)
  }

  monthEl.value = month
}

//日
function setDateBox() {
  let html = ``;
  for (let i = 0; i < 42; i++) {
    html += `<div class="item">
    <div class="first"></div>
  </div>`
  }

  timeEl.innerHTML = html;
}


//月变化
monthEl.onchange = function () {
  let month = monthEl.value
  let year = yearEl.value

  let info = calcInfo(year, month)

  renderDate(info.week, info.lastDateNumber)


  //添加选中
  for (let i = 0; i < lastDateNumber; i++) {
    if (timeItemList[i + week].textContent == dayChange) {
      timeItemList[i + week].classList.add('active')
    }
  }
  yearParameter = Number(yearEl.value)
  monthParameter = Number(monthEl.value) + 1
  dayParameter = dayChange

  // console.log(yearParameter, monthParameter, dayParameter)
  getMonthData(yearParameter, monthParameter)
  getDayData(yearParameter, monthParameter, dayParameter)
}

//年变化
yearEl.onchange = function () {
  let month = monthEl.value
  let year = yearEl.value

  let info = calcInfo(year, month)

  renderDate(info.week, info.lastDateNumber)

  //添加选中
  for (let i = 0; i < lastDateNumber; i++) {
    if (timeItemList[i + week].textContent == dayChange) {
      timeItemList[i + week].classList.add('active')
    }
  }

  yearParameter = Number(yearEl.value)
  monthParameter = Number(monthEl.value) + 1
  dayParameter = dayChange

  // console.log(yearParameter, monthParameter, dayParameter)
  getMonthData(yearParameter, monthParameter)
  getDayData(yearParameter, monthParameter, dayParameter)
}

/* 补零 0 */
function addZero(m) {
  return m < 10 ? '0' + m : m
}

//时间戳转化为具体日期
function format(timeStamp) {
  let time = new Date(timeStamp);
  let y = time.getFullYear();
  let m = time.getMonth() + 1;
  let d = time.getDate();
  return y + '-' + addZero(m) + '-' + addZero(d);
}


//传参年月日
let yearParameter = Number(yearEl.value)
let monthParameter = Number(monthEl.value) + 1
let dayParameter = null

let timer1 = setTimeout(() => {
  dayParameter = dayChange
  // console.log(yearParameter, monthParameter, dayParameter)

  //获取日数据
  getDayData(yearParameter, monthParameter, dayParameter)

}, 0)
//获取月数据
getMonthData(yearParameter, monthParameter)

//获取月数据函数
async function getMonthData(yearParameter, monthParameter) {
  let monthData = await getData(yearParameter, monthParameter);
  // console.log(monthData)
  /* 月收入 */
  let monthIncome = 0.00
  /* 月支出 */
  let monthExpenditure = 0.00
  /* 月结余 */
  let monthBalance = 0.00
  for (const item of monthData) {
    if (item.moneyType && !item.isReimbursed) {
      monthIncome += Number(item.money)
    } else if (!item.moneyType && !item.isReimbursed)
      monthExpenditure += Number(item.money)
  }
  monthBalance = monthIncome - monthExpenditure

  //添加数据
  document.querySelector('.monthlyIncome .number').textContent = monthIncome
  document.querySelector('.monthlyExpenditure .number').innerText = monthExpenditure
  document.querySelector('.monthlyBalance .number').textContent = monthBalance
}


//获取日数据函数
async function getDayData(yearParameter, monthParameter, dayParameter) {
  let dayData = await getData(yearParameter, monthParameter, dayParameter)
  // console.log(dayData)
  //日期
  let date = `${monthParameter}.${dayParameter}`
  //收入
  let income = null
  //支出
  let expenditure = null
  //添加内容
  let html = ``
  for (const item of dayData) {
    if (item.moneyType && !item.isReimbursed) {
      html += `<div class="content">
      <div class="source">
        <div class="cir"></div>
        <div class="text">
          <div class="text1">${item.consumeType}</div>
          <div class="text2">${item.annotation}</div>
        </div>
      </div>
      <div class="amount" style="color:rgb(47, 255, 75);">${Number(item.money)}</div>
    </div>`
      income += Number(item.money)
    } else if (!item.moneyType && !item.isReimbursed) {
      html += `<div class="content">
      <div class="source">
        <div class="cir"></div>
        <div class="text">
          <div class="text1">${item.consumeType}</div>
          <div class="text2">${item.annotation}</div>
        </div>
      </div>
      <div class="amount">-${Number(item.money)}</div>
    </div>`
      expenditure += Number(item.money)
    }
  }
  document.querySelector('.details .header .time').textContent = date
  document.querySelector('.details .header .income div').textContent = income
  document.querySelector('.details .header .expenditure div').textContent = expenditure
  document.querySelector('.details .list').innerHTML = html

}


//返回跳转
let left = document.querySelector('.header .left')
left.onclick = function () {
  window.location.href = "../public/firstPage.html";
}

//下方加号跳转
let foot = document.querySelector('.fixed')
foot.onclick = function () {
  window.location.href = "../public/bookKeeping.html";
}


